<template>
    <view class="container">
        <view class="main">
            <view class="user">
                <image class="logo" src="/static/logo.png" mode=""></image>
                <view class="name">科小信</view>
            </view>
            <view class="list">
                <picker @change="bindPickerChange" range-key="name" :value="provinceIndex" :range="sArray">
                    <view class="item">
                        <view class="label">所属省：</view>
                        <view>{{ selectedProvince ? selectedProvince.name : '请选择' }}</view>
                    </view>
                </picker>
                <picker @change="bindCityChange" range-key="name" :value="cityIndex" :range="cityArray" :disabled="cityArray.length === 0">
                    <view class="item">
                        <view class="label">所属市：</view>
                        <view>{{ selectedCity ? selectedCity.name : '请选择' }}</view>
                    </view>
                </picker>
                <picker @change="bindSchoolChange" range-key="name" :value="schoolIndex" :range="schoolArray" :disabled="schoolArray.length === 0">
                    <view class="item">
                        <view class="label">所属校区：</view>
                        <view>{{ selectedSchool ? selectedSchool.name : '请选择' }}</view>
                    </view>
                </picker>
                <picker @change="bindClassChange" range-key="class_name" :value="classIndex" :range="classArray" :disabled="classArray.length === 0">
                    <view class="item">
                        <view class="label">所属班级：</view>
                        <view>{{ selectedClass ? selectedClass.class_name : '请选择' }}</view>
                    </view>
                </picker>
            </view>
            <view class="btn" @click="getClassSunQrcode">生成签到码</view>
            
            <!-- 二维码预览弹窗 -->
            <view v-if="showQrcodeModal" class="qrcode-modal">
                <view class="qrcode-content">
                    <view class="qrcode-title">签到码</view>
                    <image class="qrcode-image" :src="qrcodeUrl" mode="widthFix"></image>
                    <view class="qrcode-tip">长按二维码保存到手机</view>
                    <view class="qrcode-buttons">
                        <view class="qrcode-btn cancel-btn" @click="closeQrcodeModal">取消</view>
                        <!-- <view class="qrcode-btn confirm-btn" @click="downloadQrcode">保存二维码</view> -->
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                sArray: [], // 省列表
                cityArray: [], // 市列表
                schoolArray: [], // 校区列表
                classArray: [], // 班级列表
                provinceIndex: -1, // 省索引，-1表示未选择
                cityIndex: -1, // 市索引，-1表示未选择
                schoolIndex: -1, // 校区索引，-1表示未选择
                classIndex: -1, // 班级索引，-1表示未选择
                selectedProvince: null, // 选中的省
                selectedCity: null, // 选中的市
                selectedSchool: null, // 选中的校区
                selectedClass: null, // 选中的班级
                showQrcodeModal: false, // 是否显示二维码弹窗
                qrcodeUrl: '' // 二维码图片URL
            }
        },
        onLoad() {
            // 初始化获取省列表
            this.getProvinceList()
        },
        methods: {
            // 省选择器变化
            bindPickerChange(e) {
                const selectedIndex = e.detail.value
                this.provinceIndex = selectedIndex
                this.selectedProvince = this.sArray[selectedIndex]
                
                // 重置后续选择
                this.cityIndex = -1
                this.schoolIndex = -1
                this.classIndex = -1
                this.cityArray = []
                this.schoolArray = []
                this.classArray = []
                this.selectedCity = null
                this.selectedSchool = null
                this.selectedClass = null
                
                // 获取市列表
                this.getCityList(this.selectedProvince.id)
            },
            // 市选择器变化
            bindCityChange(e) {
                const selectedIndex = e.detail.value
                this.cityIndex = selectedIndex
                this.selectedCity = this.cityArray[selectedIndex]
                
                // 重置后续选择
                this.schoolIndex = -1
                this.classIndex = -1
                this.schoolArray = []
                this.classArray = []
                this.selectedSchool = null
                this.selectedClass = null
                
                // 获取校区列表
                this.getSchoolList(this.selectedCity.id)
            },
            // 校区选择器变化
            bindSchoolChange(e) {
                const selectedIndex = e.detail.value
                this.schoolIndex = selectedIndex
                this.selectedSchool = this.schoolArray[selectedIndex]
                
                // 重置班级选择
                this.classIndex = -1
                this.classArray = []
                this.selectedClass = null
                
                // 获取班级列表
                this.getClassList(this.selectedSchool.oa_org_id)
            },
            // 班级选择器变化
            bindClassChange(e) {
                const selectedIndex = e.detail.value
                this.classIndex = selectedIndex
                this.selectedClass = this.classArray[selectedIndex]
            },
            // 获取省列表
            getProvinceList() {
                this.getList(1, 2).then(res => {
                    this.sArray = res.data.data
                    // 不设置默认值，保持未选择状态
                })
            },
            // 获取市列表
            getCityList(org_id) {
                this.getList(org_id, 3).then(res => {
                    this.cityArray = res.data.data
                    // 不设置默认值，保持未选择状态
                })
            },
            // 获取校区列表
            getSchoolList(org_id) {
                this.getList(org_id, 4).then(res => {
                    this.schoolArray = res.data.data
                    // 不设置默认值，保持未选择状态
                })
            },
            // 获取班级列表
            getClassList(oa_org_id) {
                uni.request({
                    url: 'https://st-api-dev.kxxyst.com/api/studentAttendance/getclasslist',
                    method: 'POST',
                    data: {
                        oa_org_id
                    },
                    success: (res) => {
                        if (res.data.code !== 200) return
                        this.classArray = res.data.data
                        // 不设置默认值，保持未选择状态
                    }
                });
            },
            // 获取省市区通用方法
            getList(org_id, org_type) {
                return new Promise((resolve, reject) => {
                    uni.request({
                        url: 'https://st-api-dev.kxxyst.com/api/studentAttendance/getOrg',
                        method: 'POST',
                        data: {
                            org_id,
                            org_type
                        },
                        success: (res) => {
                            if (res.data.code !== 200) {
                                reject(res)
                                return
                            }
                            resolve(res)
                        },
                        fail: (err) => {
                            reject(err)
                        }
                    });
                })
            },
            // 生成签到太阳码
            getClassSunQrcode() {
                if (!this.selectedClass) {
                    uni.showToast({
                        title: '请选择班级',
                        icon: 'none'
                    })
                    return
                }

                uni.request({
                    url: 'https://st-api-dev.kxxyst.com/api/studentAttendance/getClassSunQrcode',
                    method: 'POST',
                    data: {
                        oa_class_id: this.selectedClass.class_id,
                        from: "home",
                        page: "pages/signIn/signIn"
                        // page: "pages/home/home"
                    },
                    success: (res) => {
                        if (res.data.code !== 200) {
                            uni.showToast({
                                title: '生成签到码失败',
                                icon: 'none'
                            })
                            return
                        }
                        // H5平台处理二维码
                        this.handleQrcodeForH5(res.data.data)
                    }
                });
            },
            // 处理H5平台的二维码显示和下载
            handleQrcodeForH5(qrcodeUrl) {
                // 保存二维码URL并显示弹窗
                this.qrcodeUrl = qrcodeUrl
                this.showQrcodeModal = true
            },
            // 关闭二维码弹窗
            closeQrcodeModal() {
                this.showQrcodeModal = false
            },
            // 下载二维码
            downloadQrcode() {
                // 创建一个隐藏的a标签用于下载
                const link = document.createElement('a');
                link.href = this.qrcodeUrl;
                link.download = '签到码.png';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                uni.showToast({
                    title: '二维码已开始下载',
                    icon: 'success'
                });
                
                // 关闭弹窗
                this.closeQrcodeModal();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        max-width: 100vw;
        min-height: 100vh;
        background-color: #A166D8;
        padding: 33rpx;
        box-sizing: border-box;

        .main {
            width: calc(100vw - 33rpx - 33rpx);
            height: calc(100vh - 33rpx - 33rpx);
            background: #FFFFFF;
            border-radius: 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .user {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 280rpx;

                .logo {
                    width: 181rpx;
                    height: 181rpx;
                    border-radius: 50%;
                }

                .name {
                    font-weight: bold;
                    font-size: 37rpx;
                    color: #727171;
                    margin-top: 22rpx;
                }
            }

            .list {
                margin-top: 50rpx;
                display: flex;
                flex-direction: column;

                .item {
                    display: flex;
                    align-items: center;
                    width: 592rpx;
                    font-size: 32rpx;
                    color: #6D6D6D;
                    padding: 24rpx 0;
                    border-bottom: 2rpx solid #F3F4F4;

                    .label {
                        min-width: 170rpx;
                    }
                }
            }

            .btn {
                width: 516rpx;
                height: 78rpx;
                background: #A166D8;
                border-radius: 36rpx;
                border: 1rpx solid #EFEFEF;
                font-weight: bold;
                font-size: 34rpx;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 120rpx;
            }
        }
    }
    
    // 二维码弹窗样式
    .qrcode-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        
        .qrcode-content {
            width: 80%;
            background: #FFFFFF;
            border-radius: 20rpx;
            padding: 40rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            .qrcode-title {
                font-size: 36rpx;
                font-weight: bold;
                color: #333333;
                margin-bottom: 30rpx;
            }
            
            .qrcode-image {
                width: 300rpx;
                height: 300rpx;
                margin-bottom: 20rpx;
            }
            
            .qrcode-tip {
                font-size: 28rpx;
                color: #666666;
                margin-bottom: 40rpx;
            }
            
            .qrcode-buttons {
                display: flex;
                width: 100%;
                justify-content: space-between;
                
                .qrcode-btn {
                    flex: 1;
                    height: 70rpx;
                    border-radius: 35rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 30rpx;
                    font-weight: bold;
                    
                    &.cancel-btn {
                        background: #F5F5F5;
                        color: #666666;
                        margin-right: 20rpx;
                    }
                    
                    &.confirm-btn {
                        background: #A166D8;
                        color: #FFFFFF;
                        margin-left: 20rpx;
                    }
                }
            }
        }
    }
</style>